$(function () {
	// 1.1 获取裁剪区域的 DOM 元素
	var $image = $("#image");
	// 1.2 配置选项
	const options = {
		// 纵横比
		aspectRatio: 1,
		// 指定预览区域
		preview: ".img-preview",
	};

	// 1.3 创建裁剪区域
	$image.cropper(options);
	$("#btnChooseImage").click(function () {
		$("#file").click();
	});

	// 为文件选择框绑定 change 事件
	$("#file").on("change", function (e) {
		if (e.target.files.length == 0) return layui.layer.msg("请选择图片");
		var file = e.target.files[0]; //图片的内容
		var newImgURL = URL.createObjectURL(file);
		$image
			.cropper("destroy") // 销毁旧的裁剪区域
			.attr("src", newImgURL) // 重新设置图片路径
			.cropper(options); // 重新初始化裁剪区域
		// // 获取用户选择的文件
		// var filelist = e.target.files;
		// if (filelist.length === 0) {
		// 	return layer.msg("请选择照片！");
		// }
	});

	// 头像更改
	$("#btnUpload").click(function () {
		// 获取到用户截图的数据
		var dataURL = $image
			.cropper("getCroppedCanvas", {
				// 创建一个 Canvas 画布
				width: 100,
				height: 100,
			})
            .toDataURL("image/png");
            //将 Canvas 画布上的内容，转化为 base64 格式的字符串
        $.ajax({
            // 调用接口，把头像上传到服务器
            method: 'post',
            url: '/my/update/avatar',
            data: { avatar: dataURL },
            success:function (res) {
                console.log(res);
                layui.layer.msg(res.message);
                // 调用index.js里的函数getUserInfo,getUserInfo函数需要是全局的，不能写在入口函数里
                window.parent.getUserInfo();
            }
        });
	});
});
